<template>
  <div class="policy-management">
    <el-card class="page-container">
      <template #header>
        <div class="card-header">
          <span>慢病政策管理</span>
          <el-button type="primary" @click="handleAddPolicy">新增政策</el-button>
        </div>
      </template>

      <!-- 政策表格 -->
      <el-table :data="policyList" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="year" label="年度" width="120" />
        <el-table-column prop="max" label="封顶线" width="150">
          <template #default="scope">
            {{ scope.row.max.toLocaleString() }} 元
          </template>
        </el-table-column>
        <el-table-column prop="percentage" label="报销比例" width="150">
          <template #default="scope">
            {{ (scope.row.percentage * 100).toFixed(2) }}%
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑政策对话框 -->
    <el-dialog
        v-model="dialogVisible"
        :title="isEdit ? '编辑政策' : '新增政策'"
        width="30%"
    >
      <el-form :model="currentPolicy" label-width="100px">
        <el-form-item label="年度" prop="year">
          <el-input v-model="currentPolicy.year" placeholder="请输入年度（如：2024）" />
        </el-form-item>
        <el-form-item label="封顶线" prop="max">
          <el-input-number 
            v-model="currentPolicy.max" 
            :min="0" 
            :step="1000"
            :precision="0"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="报销比例" prop="percentage">
          <el-input-number
            v-model="currentPolicy.percentage"
            :min="0"
            :max="1"
            :step="0.01"
            :precision="4"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitPolicy">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

const policyList = ref([])
const dialogVisible = ref(false)
const isEdit = ref(false)
const currentPolicy = ref({
  id: 0,
  year: '',
  max: 50000,
  percentage: 0.7000
})

// 加载政策列表
const loadPolicyList = async () => {
  const res = await axios.get('/policy/list')
  if (res.data.code === 200) {
    policyList.value = res.data.data
  }
}

onMounted(() => {
  loadPolicyList()
})

// 处理添加政策
const handleAddPolicy = () => {
  isEdit.value = false
  currentPolicy.value = {
    id: 0,
    year: '',
    max: 50000,
    percentage: 0.7000
  }
  dialogVisible.value = true
}

// 处理编辑政策
const handleEdit = (index, row) => {
  isEdit.value = true
  currentPolicy.value = { ...row }
  dialogVisible.value = true
}

// 处理删除政策
const handleDelete = (index, row) => {
  ElMessageBox.confirm('确认删除该政策吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res = await axios.delete(`/policy/delete/${row.id}`)
      if (res.data.code === 200) {
        ElMessage.success('删除成功')
        loadPolicyList()
      } else {
        ElMessage.error(res.data.message || '删除失败')
      }
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

// 提交政策信息
const submitPolicy = async () => {
  if (!currentPolicy.value.year || !currentPolicy.value.max || currentPolicy.value.percentage === undefined) {
    ElMessage.error('请填写完整信息')
    return
  }
  if (!/^\d{4}$/.test(currentPolicy.value.year)) {
    ElMessage.error('请输入正确的年度格式（如：2024）')
    return
  }
  let res
  if (isEdit.value) {
    res = await axios.put('/policy/update', currentPolicy.value)
  } else {
    res = await axios.post('/policy/add', currentPolicy.value)
  }
  if (res.data.code === 200) {
    ElMessage.success(isEdit.value ? '政策信息更新成功' : '政策添加成功')
    dialogVisible.value = false
    loadPolicyList()
  } else {
    ElMessage.error(res.data.message || '操作失败')
  }
}
</script>

<style scoped>
.policy-management {
  padding: 20px;
}

.page-container {
  margin: 0;
  min-height: calc(100vh - 140px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.el-table {
  margin-top: 20px;
}
</style>